<template>
  <div>
    <div style="display: flex; width: 100%; text-align: right">
      <el-button type="primary" @click="add">添加线路</el-button>
    </div>
    <el-table :data="list" stripe style="width: 100%">
      <el-table-column prop="name" label="线路名称" min-width="180"></el-table-column>
      <el-table-column prop="price" label="价格" min-width="180"></el-table-column>
      <el-table-column prop="createdTime" label="添加时间" min-width="180"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="danger" size="small" @click="del(scope.index, scope.row)">删除</el-button>
            <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="this.page.total"
        :current-page="this.page.page"
        :page-size="this.page.size">
    </el-pagination>

    <el-dialog :title="dialog.title" :visible.sync="dialog.show" width="520px">
      <div>
        <el-form ref="form" :model="info" label-width="80px">
          <el-form-item label="线路名称" prop="name" required>
            <el-input v-model="info.name"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price" required>
            <el-input v-model="info.price" type="number"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.show = false">取 消</el-button>
        <el-button type="primary" v-loading="dialog.loading" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {request} from '../libs/base'
import { Message } from 'element-ui'

export default {
  data() {
    const validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('线路名称不能为空'));
      }
      request('line/check_name_exists', {'name': value}).then(res => {
        if (res.data) {
          callback(new Error('线路名称已存在'))
        } else {
          callback()
        }
      })
    };
    return {
      dialog: {
        loading: false,
        show: false,
        title: '',
        id: 0
      },
      loading: false,
      page: {
        page: 1,
        size: 15,
        total: 0
      },
      list: [],
      info: {},
      rules: {
        name: {validator: validateName, trigger: 'blur'},
        price: {required: true, message: '价格不能为空', trigger: 'blur'}
      }
    }
  },
  methods: {
    getList() {
      let param = {
        page: this.page.page,
        role: 1
      }
      this.loading = true
      request('line/list', param).then(res => {
        res = res.data
        this.page.size = res.per_page
        this.page.total = res.total
        this.list = res.data
        this.loading = false
      })
    },
    pageChange(page) {
      this.page.page = page
      this.getList()
    },
    add() {
      this.info = {
        id: 0,
        name: '',
        price: ''
      }
      this.dialog.title = '添加线路'
      this.dialog.show = true
    },
    edit(item) {
      this.info = item
      this.dialog.title = '编辑线路:' + item.name
      this.dialog.show = true
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialog.loading = true
          request('line/save', this.info).then(res => {
            Message.success({
              message: '保存成功！'
            })
            this.dialog.show = false
            this.dialog.loading = false
            if (this.info.id === 0) {
              this.getList()
            }
          }).catch(e => {
            this.dialog.loading = false
          })
        }
      })
    },
    del(index, item) {
      this.$confirm('确认要删除路线:' + item.name, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request('line/del', {id: item.id}).then(res => {
          Message.success({
            message: '删除成功！'
          })
          this.list.splice(index, 1)
          this.page.total -= 1
        })
      })
    }
  },
  mounted() {
    this.getList()
  }
}
</script>
